<style scoped>
.main{
    display: flex;
    flex-direction: row;
    width: 100%;
}
.main_left{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
}
.main_left .el-button{
    width:100%;
    height:71.5px;
    margin-left: 0px;
}
.swiper-container {
    width: 1000px;
    height: 100%;
}
</style>

<template>
    <div>
        <v-nav-top/>
        <div class="main">
            <div class="main_left">
                <el-button type="info" v-for="(item,index) in categories" :key="index" @click="toCategory(item.catid)">
                    {{item.catid}}<i class="el-icon-arrow-right el-icon--right"></i>
                </el-button>
            </div>
                <div class="swiper-container">
                    <div class="swiper-wrapper" >
                    <div class="swiper-slide" v-for="(item,index) in recomends" :key="index"><img :src="item.picurl" alt="" width="1000px" height="500px" ></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>

</template>
    
<script>
import nav from '@/components/nav.vue'
import Swiper from 'swiper'; 
import 'swiper/css/swiper.min.css';
import router from '@/router';
export default {
    name: 'index',
    components: {
        'v-nav-top': nav,
    },
    data() {
        return{
            categories: [],
            recomends: []
        }
    },
    mounted(){
        // 加入轮播图插件
        new Swiper('.swiper-container', {
            autoplay: true,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
            },
        });
        this.getCategories();
        this.getRecommnend();
    },
    methods: {
        // 请求categories信息
        getCategories(){
            this.$Axios({
                method: 'get',
                url: '/catalog/categories'
            }).then(res => {
                this.categories = res.data.data;
            }).catch(error => {
                this.$message.error("其他服务器错误"+error);
            })
        },
        getRecommnend(){
            this.$Axios({
                method: 'get',
                url: '/catalog/recommends',
            }).then(res => {
                this.recomends = res.data.data;
            }).catch(error => {
                this.$message.error("其他服务器错误"+error);
            })
        },
        toCategory(catid){
            router.push(`/category/${catid}`);
        }
    }
}
</script>